<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024-05-22 20:22:04
 * @LastEditors: toString muzi_li0323@163.com
 * @LastEditTime: 2024-06-05 11:06:57
 * @FilePath: /chain-link-api-front/src/views/transactionCallback/index.vue
 * @Description: 交易回调
-->
<template>
  <Header>
    <template #title>{{ $t('title.TransactionCallback') }}</template>
  </Header>
  <!-- 查询 -->
  <div class="searchBar">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item :label="$t('table.TxHash')">
        <el-input v-model.trim="queryParams.txHash" :placeholder="$t('global.PleaseInput') + $t('table.TxHash')"
          clearable />
      </el-form-item>
      <el-form-item :label="$t('callback.ToAddress')">
        <el-input v-model.trim="queryParams.toAddress"
          :placeholder="$t('global.PleaseInput') + $t('callback.ToAddress')" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" round @click="onSubmit(queryParams.txHash, queryParams.toAddress)">{{
          $t('button.Search')
          }}</el-button>
        <el-button type="default" :icon="Refresh" round plain @click="onReset()">{{ $t('button.Reset') }}</el-button>
      </el-form-item>
    </el-form>
  </div>


  <div class="table">
    <el-table :data="tableData" size="large" border style="width: auto;height: 600px" v-loading="loading"
      max-height="706px">
      <el-table-column prop="TxHash" :label="$t('table.TxHash')" width="600" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="Amount" :label="$t('table.Amount')" width="100" align="center"></el-table-column>
      <el-table-column prop="ToAddress" :label="$t('callback.ToAddress')" width="400" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="SymbolName" :label="$t('callback.SymbolName')" width="150" align="center">
        <template #default="scope">
          {{ scope.row.ChainName }}-{{ scope.row.SymbolName }}
        </template>
      </el-table-column>
      <el-table-column prop="Verify" :label="$t('callback.Verify')" width="150" align="center">
        <template #default="scope">
          <!-- <span>{{ scope.row.Verify === 1 ? t('callback.Normal') : t('callback.Failure') }}</span> -->
          <el-tag :type="scope.row.Verify === 1 ? 'success' : 'danger'">{{ scope.row.Verify === 1 ? t('callback.Normal')
            : t('callback.Failure') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="CallBackTime" :label="$t('table.CallBackTime')" width="200" align="center">
        <template #default="scope">
          {{ formatTimestamp(scope.row.CallBackTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="CallBackUrl" :label="$t('table.CallBackUrl')" width="400" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" :label="$t('global.Operation')" width="150" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" :disabled="scope.row.Verify === 1"
            @click="handleCallbackReissue(scope)">
            {{ $t('callback.ReissueCallback') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>


  <div class="page">
    <el-pagination v-model:current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, unref } from 'vue'
import { ElMessage, ElPagination } from "element-plus";
import { Search, Refresh } from '@element-plus/icons-vue'
import { formatTimestamp } from "../../utils/timeStamp";
import Header from "../layout/header.vue";
import { getCallbackList, callbackReissue } from '../../require/api'
import { useI18n } from "vue-i18n";

const { t } = useI18n();
// 在组件被挂载后执行
onMounted(() => {
  getList()
});

const pageSize = ref(10)
const pageIndex = ref(1)
const total = ref(0)
const tableData = ref([])
const loading = ref(false)
// 查询参数
const queryParams = reactive([
  {
    txHash: '',
    toAddress: ''
  }
])

// 获取回调列表
async function getList(txHash, address) {
  try {
    loading.value = true
    const { code, data, msg } = await getCallbackList({
      pageIndex: pageIndex.value,
      pageSize: unref(pageSize),
      txHash: txHash ? txHash : '',
      address: address ? address : '',
    })

    if (code === 200) {
      console.log(data)
      tableData.value = data.list
      total.value = data.total
    } else {
      ElMessage.error(msg)
    }
  } catch (error) {
    ElMessage.error(error)
  } finally {
    loading.value = false
  }
}

// 回调补发
async function handleCallbackReissue(scope) {
  try {
    const { code, msg } = await callbackReissue({
      id: scope.row.id
    })
    if (code === 200) {
      ElMessage.success(t('message.ReissueCallbackSuccess'))
    } else {
      ElMessage.error(msg)
    }
  } catch (error) {
    console.log(error)
  } finally {
    getList()
  }
}

// 搜索方法
const onSubmit = (txHash, toAddress) => {
  // 查询时把 pageIndex 重置为1
  pageIndex.value = 1
  getList(txHash, toAddress);
}

// 清除  queryParams
const onClear = () => {
  queryParams.txHash= ''
  queryParams.toAddress = ''
}

// 重置方法
const onReset = () => {
  onClear();
  getList();
}


// 分页
function handleSizeChange(val) {
  pageSize.value = val
  getList()
}

// 分页
function handleCurrentChange(val) {
  pageIndex.value = val
  getList(queryParams.txHash, queryParams.toAddress)
}

</script>

<style scoped lang="less">
// 查询样式
.searchBar {
  :deep(.el-form-item) {
    width: 300px !important;
    margin-right: 20px;
    margin-bottom: 0;
  }
}
</style>